import React, { Component } from 'react';
import { getRequest } from '../tools/network'

class news extends Component {
    constructor() {
        super();

        this.state = {
            newsJson: false
        }
    }

    componentDidMount() {
        var url = 'https://zhihu-daily.leanapp.cn/api/v1/contents/' + this.props.match.params.id;

        getRequest(url, function (json) {
            this.setState({
                newsJson: json,
            })
        }.bind(this));

    }

    render() {
        var newsBodyHTML = '';
        var css = '';
        var img = '';
        var title = '';
        var image_source = '';

        if (this.state.newsJson) {
            newsBodyHTML = this.state.newsJson.CONTENTS.body;
            css = this.state.newsJson.CONTENTS.css[0];
            img = this.state.newsJson.CONTENTS.image;
            title = this.state.newsJson.CONTENTS.title;
            image_source = this.state.newsJson.CONTENTS.image_source;

            newsBodyHTML += "<link rel='stylesheet' href='" + css + "'>";
        }

        return (
            <div>
                <div id="header"
                    style={styleSheet.header}>
                    <img style={styleSheet.logo}
                        src={img}
                        className="logo-img" />

                    <h4 style={styleSheet.title}>
                        {title}
                    </h4>

                    <span className="image_source"
                        style={styleSheet.image_source}>
                        图片：{image_source}
                    </span>
                </div>

                {/* <div className="sd"
                style={{
                    fontSize
                }}></div> */}

                <div dangerouslySetInnerHTML={{ __html: newsBodyHTML }} />
            </div>
        );
    }
}


var styleSheet = {
    header: {
        width: '100%',
        position: 'absolute',
        height: 200,
    },

    logo: {
        width: '100%',
        position: 'absolute',
        height: '100%',
    },

    title: {
        position: 'absolute',
        bottom: -10,
        color: 'white',
        width: '90%',
        left: '5%',
    },

    image_source: {
        position: 'absolute',
        bottom: 5,
        right: 5,
        color: 'white',
        fontSize: 10,
    },
}

export default news;
